
<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="announcement-card">
          <template #header>
            <div class="card-header">
              <el-icon><Notification /></el-icon> 公告
            </div>
          </template>
          <el-timeline class="announcement-timeline">
            <el-timeline-item
              v-for="(announcement, index) in sortedAnnouncements"
              :key="index"
              :timestamp="announcement.date"
              placement="top"
            >
              {{ announcement.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <el-icon><PieChart /></el-icon> 学生分布图
            </div>
          </template>
          <div ref="studentChart" class="chart small-chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <el-icon><Histogram /></el-icon> 教师课程分配图
            </div>
          </template>
          <div ref="teacherCourseChart" class="chart small-chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import * as echarts from "echarts";
import {
  Notification,
  PieChart,
  Histogram,
} from "@element-plus/icons-vue";
import {
  getStudentCountByClass,
  getCourseCountByTeacher,
} from "@/request/request";

const studentChart = ref(null);
const teacherCourseChart = ref(null);

const announcements = ref([
  { date: "2025-10-01", content: "欢迎使用课程管理系统！" },
  { date: "2025-10-05", content: "请注意每周五晚上10点系统进行维护关闭。" },
]);

const sortedAnnouncements = computed(() => {
  return announcements.value.slice().sort((a, b) => new Date(b.date) - new Date(a.date));
});

onMounted(async () => {
  if (studentChart.value) {
    const studentCountByClass = await getStudentCountByClass();
    const studentData = studentCountByClass.data.map((item) => ({
      value: item.count,
      name: item.className,
    }));
    const studentChartInstance = echarts.init(studentChart.value);
    studentChartInstance.setOption({
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "horizontal",
        left: "center",
        bottom: "0",
      },
      series: [
        {
          name: "学生分布",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "outside",
            formatter: "{b}: {c}",
          },
          labelLine: {
            show: true,
          },
          data: studentData,
        },
      ],
    });
  }

  if (teacherCourseChart.value) {
    const teacherCourseChartInstance = echarts.init(teacherCourseChart.value);
    const teacherCourseCount = await getCourseCountByTeacher();
    const teacherCourseData = teacherCourseCount.data.map((item) => ({
      value: item.count,
      name: item.name,
    }));
    const averageCount = teacherCourseData.reduce((sum, item) => sum + item.value, 0) / teacherCourseData.length;

    teacherCourseChartInstance.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        orient: "horizontal",
        left: "center",
        bottom: "0",
      },
      xAxis: {
        type: "category",
        data: teacherCourseData.map((item) => item.name),
        axisLabel: {
          rotate: 45,
          interval: 0,
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          formatter: "{value}",
        },
        splitNumber: 5,
        minInterval: 1,
      },
      series: [
        {
          name: "课程数量",
          type: "bar",
          data: teacherCourseData.map((item) => item.value),
          itemStyle: {
            color: function (params) {
              const colorList = ["#5470C6", "#91CC75", "#FD6D5F", "#FF9A9E", "#FF99C3", "#BC5090", "#FF6E76", "#FE6EB0", "#E062AE", "#D3027C"];
              return colorList[params.dataIndex % colorList.length];
            },
          },
          markLine: {
            data: [
              {
                yAxis: averageCount,
                name: "平均课程数量: " + averageCount,
              },
            ],
            lineStyle: {
              color: "#000",
              type: "dashed",
            },
            label: {
              formatter: "{b}: {c}",
              position: "end",
            },
          },
        },
      ],
    });
  }
});
</script>

<style scoped>
.dashboard-container {
  padding: 10px;
  background-color: #f9f9f9; /* 将背景改为奶白色 */
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.card-header .el-icon {
  margin-right: 8px;
}

.chart {
  width: 100%;
  height: 400px;
  background-color: #f9f9f9; /* 将图表背景改为奶白色 */
}

.small-chart {
  height: 300px; /* 将图表高度缩小 */
  background-color: #f9f9f9; /* 将图表背景改为奶白色 */
}

.announcement-card {
  height: 210px; /* 延长高度以占据原来系统信息部分的空间 */
  background-color: #f9f9f9; /* 将公告卡片背景改为奶白色 */
}

.announcement-timeline {
  height: 330px; /* 延长高度以适应更多公告 */
  overflow-y: auto;
  background-color: #f9f9f9; /* 将时间轴背景改为奶白色 */
}

.announcement-card .el-timeline {
  flex-grow: 1;
  overflow-y: auto;
  scrollbar-width: thin; /* 适用于 Firefox */
  scrollbar-color: #c1c1c1 #f5f5f5; /* 适用于 Firefox */
}

/* 适用于 WebKit 浏览器（如 Chrome, Safari） */
.announcement-card .el-timeline::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.announcement-card .el-timeline::-webkit-scrollbar-track {
  background: #f5f5f5; /* 滚动条轨道背景 */
  border-radius: 4px;
}

.announcement-card .el-timeline::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; /* 滚动条颜色 */
  border-radius: 4px;
  border: 2px solid #f5f5f5; /* 滚动条边框 */
}

.chart-card {
  background-color: #f9f9f9; /* 将卡片背景改为奶白色 */
}
</style>
